import React, { lazy } from "react";
import {
  PieChartOutlined,
  UserOutlined,
  ShoppingOutlined,
  BarsOutlined,
  PicCenterOutlined,
  SnippetsOutlined
} from "@ant-design/icons";

import Loader from "@/components/Loader";

import Home from "../views/Home";

const Manager = lazy(() => import("@/views/Manager"));
const Login = lazy(() => import("@/views/Login"));
const Register = lazy(() => import("@/views/Register"));
const Logout = lazy(() => import("@/views/Logout"));
const GoodsInfo = lazy(() => import("@/views/GoodsInfo"));
const UserList = lazy(() => import("@/views/UserList"));
const GoodList = lazy(() => import("@/views/GoodList"));
const CategoryList = lazy(() => import("@/views/CategoryList"));
const OrderList = lazy(() => import("@/views/OrderList"));
const SlideList = lazy(() => import("@/views/SlideList"));

const withLoadingComponents = (comp: JSX.Element) => (
  <React.Suspense fallback={<Loader />}>{comp}</React.Suspense>
);

const router = [
  {
    path: "/",
    element: <Home />,
    text: "主页",
  },
  {
    path: "/manager",
    element: withLoadingComponents(<Manager />),
    text: "后台管理系统",
    children: [
      {
        path: "goodsInfo",
        element: withLoadingComponents(<GoodsInfo />),
        icon: <PieChartOutlined />,
        text: "首页统计",
      },
      {
        path: "userList",
        element: withLoadingComponents(<UserList />),
        icon: <UserOutlined />,
        text: "用户列表",
      },
      {
        path: "goodList",
        element: withLoadingComponents(<GoodList />),
        icon: <ShoppingOutlined />,
        text: "商品列表",
      },
      {
        path: "categoryList",
        element: withLoadingComponents(<CategoryList />),
        icon: <BarsOutlined />,
        text: "分类列表",
      },
      {
        path: "orderList",
        element: withLoadingComponents(<OrderList />),
        icon: <SnippetsOutlined />,
        text: "订单列表",
      },
      {
        path: "slideList",
        element: withLoadingComponents(<SlideList />),
        icon: <PicCenterOutlined />,
        text: "轮播列表",
      },
    ],
  },
  {
    path: "/login",
    element: withLoadingComponents(<Login />),
    text: "登陆",
  },
  {
    path: "/register",
    element: withLoadingComponents(<Register />),
    text: "注册",
  },
  {
    path: "/logout",
    element: withLoadingComponents(<Logout />),
    text: "退出登陆",
  },
];

export default router;
